<!-- 委托记录 -->
<template>
	<view class="ucen-container">
		<t-header @back="clickNavBackFn">委托记录</t-header>
		<!-- content -->
		<view class="ucen-content">
			<mescroll-uni
				:height="`${height}rpx`"
				:down="downOption"
				:up="upOption"
				@init="mescrollInit"
				@down="downCallback"
				@up="upCallback"
			>
				<view v-for="(item, index) in list" :key="index" @click="toDetail(item)" class="ucen-item">
					<view class="padding-bottom-sm border-bottom text-lg">
							<image class="tag" :src="`/static/images/icons/${getMarketCode(item.allcode)}.png`" mode=""></image>
							<text>{{item.title}}</text>
							<text class="padding-left-sm text-gray">{{item.code}}</text>
					</view>
					<view class="flex flex-wrap text-nomal">
						<view class="col-2">
							<text class="label">买卖类别</text>
							<text :class="item.is_sell==0?'text-red':'text-green'">证券{{item.is_sell==0?'买入':'卖出'}}{{item.buytype==7?'(大宗)':''}}</text>
						</view>
						<view class="col-2">
							<text class="label">当前状态</text>
							<text>挂单</text>
						</view>
						<view class="col-2">
							<text class="label">委托数量</text>
							<text>{{item.number}}</text>
						</view>
						<view class="col-2">
							<text class="label">委托价格</text>
							<text>{{item.buyprice}}</text>
						</view>
					</view>
				</view>
			</mescroll-uni>
		</view>
	</view>
</template>

<script setup>
import {ref, inject} from 'vue';
import {onLoad, onPageScroll, onReachBottom} from '@dcloudio/uni-app';
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";

const {mescrollInit, downCallback, getMescroll} = useMescroll(onPageScroll, onReachBottom);

const tui = inject('tui');

// components
import THeader from '@/components/views/t-header/index.vue'; // 头部组件

// api
import {entrustList} from "@/api/user.js";

import {getMarketCode} from '@/utils/stock.js';

const height = ref(0);

onLoad((options) => {
	height.value = 1418;
	
	setTimeout(() => {
		getMescroll().resetUpScroll();
	}, 300);
});

// 点击返回
const clickNavBackFn = () => {
	uni.navigateBack();
};

// mescroll-body 配置（down && up）
const downOption = {
	auto: false
};
const upOption = {
	auto: false,
	noMoreSize: 4,
	empty: {
		use : true,
		icon: '/static/images/wushuju.png',
		tip: '~ 空空如也 ~'
	}
};

// 列表数据
const list = ref([]);

const upCallback = (mescroll) => {
	//联网加载数据
	entrustList({
		status: 2,
		buytype: "1,7",
		page: mescroll.num,
		size: mescroll.size
	}).then(res => {
		// this.$emit('initList',true)
		if(res.code == 1){
			if(mescroll.num == 1) list.value = [];
			list.value=list.value.concat(res.data.list);
			mescroll.endSuccess(res.data.list.length);
		}else{
			mescroll.endErr();
		}
	});
};

const toDetail = (item) => {
	uni.navigateTo({
		url:'/pages/shares/entrustDetail?data=' + JSON.stringify(item)
	})
};
</script>

<style lang='scss' scoped>
.ucen-container {
	display: flex;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
	background: #F5F5F5;
	box-sizing: border-box;
	
	.ucen-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		margin: 0 18rpx 26rpx;
		
		.ucen-item {
			width: 100%;
			height: 222rpx;
			margin-bottom: 20rpx;
			padding: 20rpx 32rpx;
			border-radius: 34rpx;
			background: #FFFFFF;
			box-sizing: border-box;
		}
	}
}

.col-2{margin-top: 16rpx;}
.label{
	color: #999;padding-right: 16rpx;
}
.tag{width: 36rpx;height: 24rpx;margin-right: 10rpx;}
</style>
